<template>
	<div class="login" id="loginBox">
		<div class="menu-toggler sidebar-toggler"></div>
		<div class="logo">
			<a href="index.html">
				<img src="static/admin/pages/img/stlogo-big.png" alt="" />
			</a>
		</div>
		<div class="content">
			<form id="formid">
				<h3 class="form-title" style="text-align: center;">渠道分销后台</h3>
				<div class="alert alert-danger" v-if="showCode==0">
					<span>{{msg}}</span>
				</div>
				<div class="error"></div>
				<div class="form-group">
					<label class="control-label visible-ie8 visible-ie9">用户名</label>
					<input class="form-control form-control-solid placeholder-no-fix" v-model="user" type="text" autocomplete="off" placeholder="用户名" name="username" />
				</div>
				<div class="form-group">
					<label class="control-label visible-ie8 visible-ie9">密码</label>
					<input class="form-control form-control-solid placeholder-no-fix" @keydown="login" v-model="pass" type="password" autocomplete="off" placeholder="密码" name="password" />
				</div>
				<div class="form-actions">
					<label class="rememberme mt-checkbox mt-checkbox-outline">
		                <!--<input type="checkbox" name="remember" value="1" /> 记住我
		                <span></span>-->
	            	</label>
					<a class="btn btn-success uppercase pull-right" @click="login">登录</a>
				</div>
				<div class="create-account"></div>
			</form>
			<!-- END LOGIN FORM -->
		</div>
		<div class="copyright"> 2018 &copy; copyright by silktone. </div>
	</div>
</template>
<script>
	import "static/admin/pages/css/login-4.min.css"
	import "static/global/plugins/backstretch/jquery.backstretch.min.js"
	import "static/admin/pages/scripts/login.js"
	import axios from "axios"
	import qs from "qs"
	import { mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				user: "",
				pass: "",
				showCode: 1,
				msg: "",
				resFlag: true
			}
		},
		methods: {
			login(e) {
				var that = this;
				that.resFlag = false;

				function logining() {
					if(that.user == "") {
						that.showCode = 0;
						that.msg = "请输入用户名";
						return;
					}
					if(that.pass == "") {
						that.showCode = 0;
						that.msg = "请输入密码";
						return;
					}
					axios.post("interface/login/loginIn?", qs.stringify({
						username: that.user,
						password: that.pass
					})).then((res) => {
						that.showCode = res.data.code;
						that.msg = res.data.msg;
						that.resFlag = true;
						if(that.showCode == 1) {
               				sessionStorage.setItem("token", res.data.data.token)
							sessionStorage.setItem("jkey", res.data.data.jwtrandomKey)
							sessionStorage.setItem("nav", JSON.stringify(res.data.data.sysResources))
							sessionStorage.setItem("purl", JSON.stringify(res.data.data.permissionsurl))
							that.token(res.data.data.token); //token放到vuex中
							console.log(res.data.data.sysResources)
							that.nav(res.data.data.sysResources); //导航信息放到vuex中
							that.purl(res.data.data.permissionsurl);
							$(".backstretch").hide();
							that.$router.replace("/interface/homemain");
							window.location.reload();
						}
					})
				}
				if(!that.resFlag) {
					if(e.type == 'keydown') {
						if(e.which == 13) {
							logining();
						}
					} else if(e.type == 'click') {
						logining();
					}
				}
			},
			...mapMutations({
				token: 'TOKEN',
				nav: "NAV",
				purl: "PURL"
			})
		}
	}
</script>

<style>

</style>